<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue 生命周期（加载的生命周期)</title>
</head>
<body>
  <div id="app">
    <h2 id="title" v-text="msg"></h2>
    <button type="button" @click="msg = '这是要更新的数据内容' + count++ ">更新数据</button>
  </div>
  <button type="button" onclick="destroyFun()">销毁vm对象</button>
</body>
<script src="./src/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      msg: 'Hello Vue.js!!!',
      count: 0
    },
    // 生命周期函数
    // 1.第一个生命周期函数，表示实例已经创建
    beforeCreate() {
      console.warn('----------beforeCreate-----------');
      console.error(this.msg); // undefined 此时 vm实例对象中的data属性还没办法使用
      let el = document.getElementById('title');
      console.log(el.tagName, "内容：",el.innerText);
    },
    // 2.第二个生命周期函数 表示vm对象初始化完成
    created() {
      console.warn('----------Created-----------');
      console.error(this.msg); // 此时可以正常使用  data中的数据
      let el = document.getElementById('title');
      console.log(el.tagName, "内容：", el.innerText);
    },
    // 3.第三个生命周期函数
    // mount 挂载的意思
    // 模板已经在内存中编译完成，但是尚未渲染到页面上
    beforeMount() {
      console.warn('----------beforeMount-----------');
      console.error(this.msg); // 此时可以正常使用  data中的数据
      let el = document.getElementById('title');
      console.log(el.tagName, "内容：", el.innerHTML);
    },
    // 4. 第四个生命周期函数
    // 挂载完成 这个生命周期函数才是真正的 视图和数据模型真正的绑定了一起
    mounted() {
      console.warn('----------Mounted-----------');
      console.error(this.msg); // 此时可以正常使用  data中的数据
      let el = document.getElementById('title');
      console.log(el.tagName, "内容：", el.innerHTML);
    },
    // 5. 第五个生命周期函数
    // 准备更新数据，此时数据data 已经更新完毕，但是 视图中的数据 还没有更新
    beforeUpdate() {
      console.warn('-----------beforeUpdate----------');
      console.error(this.msg);
      let el = document.getElementById('title');
      console.log(el.tagName, "内容：", el.innerHTML);
    },
    // 6. 第六个生命周期函数
    // 数据更新完毕，视图上也完成更新
    updated() {
      console.warn('-----------updated----------');
      console.error(this.msg);
      let el = document.getElementById('title');
      console.log(el.tagName, "内容：", el.innerHTML);
    },
    // 7. 第七个生命周期函数
    // 即将销毁
    beforeDestroy() {
      console.warn('-----------beforeDestroy----------');
      console.error(this.msg);
      let el = document.getElementById('title');
      console.log(el.tagName, "内容：", el.innerHTML);
    },
    // 8. 第8个生命周期函数
    destroyed(){
      console.warn('-----------destroyed----------');
      console.error(this.msg);
      let el = document.getElementById('title');
      console.log(el.tagName, "内容：", el.innerHTML);
    }
  });

  function destroyFun(){
    // 销毁 vm 实例对象
    vm.$destroy();
  }

</script>
</html>